home *** CD-ROM | disk | FTP | other *** search
/ 74.208.221.89 / 74.208.221.89.zip / 74.208.221.89 / maincss - Copy.css < prev    next >
Cascading Style Sheet File  |  2015-02-14  |  3KB  |  190 lines
  1. @charset "utf-8";
  2. /* Simple fluid media
  3.    Note: Fluid media requires that you remove the media's height and width attributes from the HTML
  4.    http://www.alistapart.com/articles/fluid-images/ 
  5. */
  6. img, object, embed, video {
  7.     max-width: 100%;
  8. }
  9. /* IE 6 does not support max-width so default to width 100% */
  10. .ie6 img {
  11.     width:100%;
  12. }
  13.  
  14. /*
  15.     Dreamweaver Fluid Grid Properties
  16.     ----------------------------------
  17.     dw-num-cols-mobile:        5;
  18.     dw-num-cols-tablet:        8;
  19.     dw-num-cols-desktop:    10;
  20.     dw-gutter-percentage:    25;
  21.     
  22.     Inspiration from "Responsive Web Design" by Ethan Marcotte 
  23.     http://www.alistapart.com/articles/responsive-web-design
  24.     
  25.     and Golden Grid System by Joni Korpi
  26.     http://goldengridsystem.com/
  27. */
  28.  
  29. /* Mobile Layout: 480px and below. */
  30.  
  31. .gridContainer {
  32.     margin-left: auto;
  33.     margin-right: auto;
  34.     width: 87.36%;
  35.     padding-left: 1.82%;
  36.     padding-right: 1.82%;
  37. }
  38. #LayoutDiv1 {
  39.     clear: none;
  40.     float: left;
  41.     margin-left: 0;
  42.     width: 100%;
  43.     display: block;
  44. }
  45. #top1 {
  46.     clear: both;
  47.     float: left;
  48.     margin-left: 0;
  49.     width: 100%;
  50.     display: block;
  51. }
  52. #top2 {
  53.     clear: both;
  54.     float: left;
  55.     margin-left: 0;
  56.     width: 100%;
  57.     display: block;
  58. }
  59. #left1 {
  60.     clear: both;
  61.     float: left;
  62.     margin-left: 0;
  63.     width: 100%;
  64.     display: block;
  65. }
  66. #left2 {
  67.     clear: both;
  68.     float: left;
  69.     margin-left: 0;
  70.     width: 100%;
  71.     display: block;
  72. }
  73. #LayoutDiv2 {
  74.     clear: none;
  75.     float: left;
  76.     margin-left: 4.1666%;
  77.     width: 100%;
  78.     display: block;
  79. }
  80.  
  81. /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
  82.  
  83. @media only screen and (min-width: 481px) {
  84. .gridContainer {
  85.     width: 90.675%;
  86.     padding-left: 1.1625%;
  87.     padding-right: 1.1625%;
  88. }
  89. #LayoutDiv1 {
  90.     clear: none;
  91.     float: left;
  92.     margin-left: 0;
  93.     width: 100%;
  94.     display: block;
  95. }
  96. #top1 {
  97.     clear: both;
  98.     float: left;
  99.     margin-left: 0;
  100.     width: 100%;
  101.     display: block;
  102. }
  103. #top2 {
  104.     clear: both;
  105.     float: left;
  106.     margin-left: 0;
  107.     width: 100%;
  108.     display: block;
  109. }
  110. #left1 {
  111.     clear: both;
  112.     float: left;
  113.     margin-left: 0;
  114.     width: 100%;
  115.     display: block;
  116. }
  117. #left2 {
  118.     clear: both;
  119.     float: left;
  120.     margin-left: 0;
  121.     width: 100%;
  122.     display: block;
  123. }
  124. #LayoutDiv2 {
  125.     clear: none;
  126.     float: left;
  127.     margin-left: 2.5641%;
  128.     width: 100%;
  129.     display: block;
  130. }
  131. }
  132.  
  133. /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
  134.  
  135. @media only screen and (min-width: 769px) {
  136. .gridContainer {
  137.     width: 88.2%;
  138.     max-width: 1232px;
  139.     padding-left: 0;
  140.     padding-right: 0;
  141.     margin: auto;
  142. }
  143. #LayoutDiv1 {
  144.     clear: none;
  145.     float: left;
  146.     margin-left: 0;
  147.     width: 40%;
  148.     display: block;
  149. }
  150. #top1 {
  151.     clear: both;
  152.     float: left;
  153.     margin-left: 0;
  154.     width: 100%;
  155.     display: block;
  156. }
  157. #top2 {
  158.     clear: both;
  159.     float: left;
  160.     margin-left: 0;
  161.     width: 100%;
  162.     display: block;
  163. }
  164. #left1 {
  165.     clear: both;
  166.     float: left;
  167.     margin-left: 0;
  168.     width: 38.7755%;
  169.     display: block;
  170. }
  171. #left2 {
  172.     clear: none;
  173.     float: left;
  174.     margin-left: 2.0408%;
  175.     width: 38.7755%;
  176.     display: block;
  177. }
  178. }
  179. .colour1 {
  180.     background-color: #06C;
  181. }
  182. .colour2 {
  183.     background-color: #C33;
  184. }
  185. .colour3 {
  186.     background-color: #9C6;
  187. }
  188. .colour4 {
  189.     background-color: #6FF;
  190. }